<template>
  <div class="home">
    <!-- <div
      id="con"
      style="width: 100vw; height: 90vh; border: 1px solid #ccc"
    ></div> -->
    <Baidu-map ak='jKfBNCjQw5nwGeeOQocjMLFgT30kFbUS' :center="center" :zoom="zoom" @ready="handler" style="height:90vh" @click="getClickInfo" :scroll-wheel-zoom="true"></Baidu-map>
  </div>
</template>

<script>
//局部注册   百度地图
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BMap from "BMap";
// import BMapSymbolSHAPEPOINT from "BMap_Symbol_SHAPE_POINT";
export default {
  name: "HomeBaidu",
  components: {
    BaiduMap,
  },
  data() {
    return {
      map: null,
      center:{lng:109.12, lat:36.45},
      zoom:13
    };
  },
  mounted() {
    this.$nextTick(() => {
  
    });
  },
  methods: {
    handler({ BMap, map }) {
      var point = new BMap.Point(108.95749, 34.345952);
      map.centerAndZoom(point, 10);
      var marker = new BMap.Marker(point);  //创建标注
      map.addOverlay(marker);    //添加到地图中
      
      var circle = new BMap.Circle(point, 6, {
        strokeColor: "Red",
        strokeWeight: 6,
        strokeOpacity: 1,
        Color: "Red",
        fillColor: "#f03",
      });
      map.addOverlay(circle);

    },
    getClickInfo(e) {
      console.log('e',e);
      console.log(e.point.lng);
      console.log(e.point.lat);
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
   
    // baidu(){
    //   var map = new BMap.Map('con')
    //   var point = new BMap.Point(113.1,23.1)
    //   map.centerAndZoom(point,12)
    //   var marker = new BMap.Marker(point)
    //   map.addOverlay(marker)
    //   map.enableScrollWheelZoom(true)
    //   map.addControl(new BMap.NavigationControl())
    //   map.addControl(new BMap.ScaleControl())
    //   map.addControl(new BMap.OverviewMapControl())
    //   var infoWindow = new BMap.InfoWindow('<p>佛山市</p>')
    //   marker.addEventListener('mouseover',function () {
    //     this.openInfoWindow(infoWindow)
    //     console.log(1111);
    //   })
    //   marker.addEventListener('mouseout',function(){

    //   })
    // }
  },
};
</script>
<style>
.home {
  margin: 0;
  padding: 0;
}
</style>
